<template>
  <div> 
    <!-- 搜索条件 -->
    <el-form :inline="true" class="demo-form-inline" style="margin:10px 0px 0px 10px">

      <!-- <el-select v-model="id" placeholder="请选择"   @change="tableData.list"  style="margin-right:10px">
        <el-option
          v-for="item in tableData.list"
          :key="item.propsList[0].propsName"
          :label="'碎片道具1：' +item.propsList[0].propsName"
          :value="item.propsList[0].propsName"
         >
        </el-option>
      </el-select>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getHCList()">查询</el-button>
      </el-form-item> -->

       <el-form-item>
        <a :href="'#/hecheng/addOrUpdateHeCheng'"><el-button type="primary" >添加合成道具</el-button></a>
      </el-form-item>
    </el-form>
    
    <!-- 列表数据 -->
    <el-table
      :data="tableData.list"
      border
      style="width: 100%">

      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column>

      <el-table-column 
        prop="propsList[0].propsName"
        label="道具碎片1"
        width="320px">
      </el-table-column> 

      <el-table-column 
        prop="propsList[1].propsName"
        label="道具碎片2"
        width="320px">
      </el-table-column> 

      <el-table-column 
        prop="propsList[2].propsName"
        label="道具碎片3"
        width="320px">
      </el-table-column> 

      <el-table-column 
        prop="propsList[3].propsName"
        label="合成道具"
        width="320px">
      </el-table-column>

      <el-table-column
        label="操作"
        width="300px">
        <template slot-scope="scope" >
            <a :href="'#/hecheng/addOrUpdateHeCheng?id='+scope.row.id">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </a>
            <el-button type="danger"  @click="deleteHeChengProps(scope.row.id)" icon="el-icon-delete" circle style="margin-left:10px"></el-button>
        </template>
      </el-table-column>    
    </el-table>
  </div>
</template>

<script>
import HCApi from "@/api/hecheng"

export default{
    data(){    //定义变量和初始值
        return{
            id:1,
            //查询条件
            //表格数据
            tableData:{
                list: []
            },
        }
    },
    created(){    //页面渲染之前执行，一般调用methods定义的方法
       //获取所有角色列表
        // this.getAllRoleList()
        //合成道具列表  
        this.getHCList()
    },
    methods:{    //创建具体的方法，调用.js定义的方法
        //获取合成道具列表
         getHCList(){
            // if(!id){
            //   this.id=0;
            // }
            this.$loading = true;
            HCApi.getHeChengList().then(res => {
                console.log(res.data.list);
                //取消加载
                this.$loading = false;
                //数据赋值
                this.tableData.list = res.data.list;
            }).then(error=>{
                this.$loading = false;
            })
        },
    //删除道具
    deleteHeChengProps(id){
        //提示框
        this.$confirm('是否删除该合成道具', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //执行删除
          HCApi.deleteHeChengProps(id).then(res => {
            //执行后提示
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getHCList()
        })
      }).catch(() => {
        //捕捉异常
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    } 
  }
}
</script>
